<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function nameCheck(){
				var name = document.getElementById("name").value;
				var reg = /^\w{5,10}$/;
				if(!reg.test(name)){
					document.getElementById("form1").onsubmit = false;
					if(name.length == 0 || name =="" || name == null){
						nameTip.innerHTML = "<font color='red'>名字不能为空</font>";
					}else{
						nameTip.innerHTML= "<font color='red'>名字格式错误，必须是5-10位数字、字母、下划线</font>";
					}
				}else{
					nameTip.innerHTML = "<font color='green'>名字输入正确</font>";
				}
			}
			function emailCheck(){
				var email = document.getElementById("email").value;
				var reg = /^\w+@[0-9a-zA-Z]{2,4}\.[a-zA-Z]{2,3}(\.[a-zA-Z]{2,3})?$/;
				var emailTip = document.getElementById("emailTip");
				if(!reg.test(email)){
					if(email.length == 0 || email =="" || email == null){
						emailTip.innerHTML = "<font color='red'>邮箱不能为空</font>";
					}else{
						emailTip.innerHTML = "<font color='red'>邮箱格式错误</font>";
					}
				}else{
					emailTip.innerHTML = "<font color='green'>邮箱输入正确</font>";
				}
			}
			
			function formCheck(){
				console.log("formChekc");
				var name = document.getElementById("name").value;
				var nameReg = /^\w{5,10}$/;
				var email = document.getElementById("email").value;
				var emailReg = /^\w+@[0-9a-zA-Z]{2,4}\.[a-zA-Z]{2,3}(\.[a-zA-Z]{2,3})?$/;
				if((!nameReg.test(name)) || (!emailReg.test(email))){
					return false;
				}else{
					return true;
				}
			}

		</script>
	</head>
	<body>
		<form action="点击事件.html" name="form1" id="form1" onsubmit="return formCheck()">
			名字:<input type="text" name="name" id="name" onblur="nameCheck()"><span id="nameTip"></span><br>
			邮箱:<input type="text" name="email" id="email" onblur="emailCheck()"><span id="emailTip"></span><br>
			<input type="submit" value="提交"/>
		</form>
	</body>
</html>
